<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>产品菜单2</title>
    <link th:href="@{login/css/bootstrap1.css}" rel="stylesheet"/>
    <link th:href="@{/login/css/productTab.css}" rel="stylesheet"/>
    <script th:src="@{login/js/bootstrap1.js}"></script>
    <script th:src="@{/login/js/jquery.js}"></script>
</head>
<body>
<div class="container card-body card">
    <div id="liveAlertPlaceholder" style="position:fixed;top:38%;right:46%;z-index: 100"></div>
    <div class="card-header" style="position: relative;margin-bottom: 5px;margin-top: -10px;margin-left: -10px">
        <h3 style="margin-left: -5px">商品列表</h3>
        <a href="/productTable1" class="btn btn-primary btn-sm page1">返回上页</a>
    </div>
    <div class="row" style="width: 100%">
        <form class="row col-8">
            <!-- 隐藏主键：新增时为空，修改时有值 -->
            <input type="hidden" id="id" name="id" th:value="${product.id}">
            <h4 class="card-title" style="margin-bottom: 10px;">商品信息</h4>
            <div class="col-md-6">
                <label for="name" class="form-label">商品名称</label>&nbsp;&nbsp;
                <input type="text" id="name" name="name" class="form-control"
                       th:value="${product.name}">
            </div>
            <div class="col-md-6">
                <label class="form-label">商品分类</label>
                <select class="form-select" id="category" name="category">
                    <!--默认"请选择分类"，当后台没有给商品分类（null）或 分类是空字符串时，设为默认选项-->
                    <option value=""
                            th:selected="${product.category == null or product.category == ''}">请选择分类
                    </option>
                    <option value="电子产品"
                            th:selected="${product.category=='电子产品'}">电子产品
                    </option>
                    <option value="电脑配件"
                            th:selected="${product.category=='电脑配件'}">电脑配件
                    </option>
                    <option value="家居用品"
                            th:selected="${product.category=='家居用品'}">家居用品
                    </option>
                    <option value="服装"
                            th:selected="${product.category=='服装'}">服装
                    </option>
                    <option value="书籍"
                            th:selected="${product.category=='书籍'}">书籍
                    </option>
                </select>
            </div>
            <div class="col-md-6">
                <label class="form-label" for="price">商品价格</label>&nbsp;&nbsp;
                <div class="input-group">
                    <span class="input-group-text">$</span>
                    <input type="number" id="price" name="price" class="form-control"
                           th:value="${product.price}" step="0.01" min="0">
                </div>
            </div>
            <div class="col-md-6">
                <label class="form-label" for="stock">库存数量</label>&nbsp;&nbsp;
                <input type="number" id="stock" name="stock" class="form-control"
                       th:value="${product.stock}" step="1" min="0">
            </div>
            <div class="col-12">
                <label for="imageUrl" class="form-label">商品图片</label>
                <input type="text" id="imageUrl" name="imageUrl" class="form-control"
                       th:value="${product.imageUrl}" placeholder="可手动填写">
            </div>
            <div class="col-12">
                <label for="description" class="form-label">商品描述</label>
                <textarea id="description" name="description" class="form-control"
                          rows="3" th:text="${product.description}"></textarea>
            </div>
            <div class="col-12 d-flex align-items-center">
                <label class="form-label">商品状态 *</label>&nbsp;&nbsp;
                <div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="status" id="status1" value="1"
                               th:checked="${product.status==1}">
                        <label class="form-check-label" for="status1">正常(上架)</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="status" id="status2" value="0"
                               th:checked="${product.status==0}">
                        <label class="form-check-label" for="status2">下架</label>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <button type="button" class="btn btn-primary" onclick="postProduct()">保存商品</button>
                <!--            type类型为submit会直接提交导致添加成功的提示框不显示，使用type为button可行-->
                <button type="reset" class="btn btn-primary">重置</button>
            </div>
        </form>
        <div class="col-4 card" style="padding: 10px;margin-left: 20px">
            <h3>商品预览</h3>
            <img th:src="${product.imageUrl}" class="card-img-top productImg" th:alt="${product.name}?: '暂无图片'"
                 style="width: 60%;height: 60%">
            <!--        数据库字段多个单词之间用下划线连接，在实体类中变量是以小驼峰命名，所以二者存在冲突，
            法一：可以在xml配置文件中专门设置一个resultMap做映射绑定，实现字段对应变量
            法二：在全局配置中添加一个设置，下划线转为驼峰命名
            -->
            <div class="card-body" style="margin-left: -15px;margin-top: -10px">
                <!--                使用三元运算符来替代-->
                <h3 class="card-title"
                    th:text="${product.name} ?: '暂无名称'">产品名称</h3>
                <p th:text="${product.description} ?: '暂无描述'">描述</p>
                <p style="margin-top:-15px">
                    <span th:text="${product.price} ?: '待定'"
                          style="color:red;font-size:26px">价格</span>&nbsp;|&nbsp;
                    <span th:text="${product.stock} ?: '暂无库存信息'"
                          style="color:gray;font-size:14px">库存</span>&nbsp;|&nbsp;
                    <span id="previewStatus"
                          class="badge status-badge"
                          th:classappend="${product.status == 1} ? 'bg-success' : 'bg-secondary'"
                          th:text="${product.status == 1} ? '上架' : '下架'">
<!--                        三元表达式，classappend是追加class选择器，状态为多少一个颜色，显示上下架-->
                    </span>
                </p>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    //修改成功提示框提示框
    const alterDom = document.getElementById("liveAlertPlaceholder")
    const alert = (message, type) => {
        const wrapper = document.createElement('div')
        wrapper.innerHTML = [
            `<div class="alert alert-${type} alert-dismissible" role="alert">`,
            `   <div>${message}</div>`,
            '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
            '</div>'
        ].join('')
        alterDom.append(wrapper)
    }

    //传递数据
    function collectData() {
        const priceVal = parseFloat($('#price').val());  // 转成数字，如 99.99
        const stockVal = parseInt($('#stock').val(), 10); // 转成整数，如 10
        const statusVal = parseInt($('[name="status"]:checked').val(), 10); // "1" -> 1（数字）
        return {
            id: $('#id').val() ? parseInt($('#id').val()) : null, // 关键
            name: $('#name').val().trim(),
            category: $('#category').val().trim(),
            price: isNaN(priceVal) ? null : priceVal,         // 确保是数字，否则 null
            stock: isNaN(stockVal) ? null : stockVal,         // 确保是数字
            description: $('#description').val().trim(),
            status: isNaN(statusVal) ? null : statusVal,       // 1 或 0，数字类型,能转成正常数字就留数字，否则给 null，避免把 NaN 这种脏数据发给服务器。
            imageUrl: $('#imageUrl').val().trim()
            //$ 是 jQuery 的“入口函数”。选择器 $('#imageUrl') 找到页面中 id="imageUrl" 的那个 DOM 元素
            // jQuery 的 .val() 方法用来取（或设）表单元素的当前值,这里只传了空括号，表示“获取”用户此刻填进去的字符串
            //    .trim() 原生字符串方法，把开头、结尾的空格/换行全部去掉
        };
    }

    function postProduct() {
        const data = collectData();//调用函数使用这个函数获取数据
        if (!data.name || data.name.trim() === '') {
            alert('商品名称不能为空');
            $('#name').focus();//弹出提示后，光标自动回到输入框
            return;          // 阻断提交
        }
        if (!data.category) {
            alert('请选择商品分类');
            $('#category').focus();
            return;
        }
        // 下面正常发 JSON
        $.ajax({
            type: 'POST',
            url: '/postProductList1',//访问路径
            contentType: 'application/json',// 告诉服务器“我发的是 JSON”，
            // 用了 JSON.stringify(data)，就必须加 contentType: 'application/json'，否则后端会直接 400 报错
            data: JSON.stringify(data),        // 把 JS 对象序列化成 JSON 字符串
            success: resp => {
                if (resp === 'PostOK') {//新增数据
                    alert("添加成功", "success");
                    setTimeout(() => {
                        location.reload();   // 重新加载当前页面
                    }, 1500);
                } else if (resp === 'PutOK') {//修改数据
                    alert("修改成功", "success");
                    setTimeout(() => {
                        location.reload();   // 重新加载当前页面
                    }, 1500);
                }
            },
            error: function () {
            }
        });
    }
</script>
</html>

<!--*/-->
<!--form-check，它默认是块级元素，每个 .form-check 会独占一行。-->
<!--.form-check 加上 .form-check-inline选择器的样式即可同行-->
<!--商品状态和单选框同行d-flex align-items-center-->
<!--step：设置步长,min 和max设置最大值-->
<!--class的input-group选择器可以同行显示-->
<!--th:classappend="${product.status == 1} ? 'bg-success' : 'bg-secondary'" classappend是追加样式-->
<!--*/-->